<template>
	<view>
		<scroll-view class="scroll" scroll-y >
			<view>
				<view class="time fcc">
					2024-02-02 18:21:21
				</view>
				<view class="left">
					<view class="avator">
						<image class="img" src="https://img.js.design/assets/img/668cd813b375c36d9e22e80e.png#ed1bb369ee52adbb998a286abe5f63f1" mode=""></image>
					</view>
					<view class="msg">
						<view class="msg-item">
							付款两天后
						</view>
					</view>
				</view>
				<view class="ritem" v-for="(item, index) in 7" :key="index">
					<view class="right">
						<view class="msg">
							<view class="msg-item">
								付款两天后
							</view>
						</view>
						<view class="avator">
							<image class="img" src="https://img.js.design/assets/img/668cd813b375c36d9e22e80e.png#ed1bb369ee52adbb998a286abe5f63f1" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="send fcs">
			<view class="input">
				<input class="ipt" type="text" placeholder="请输入内容"/>
			</view>
			<view class="button">
				<u-button size="mini" shape="circle" :custom-style="customStyle">发送</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					background: 'linear-gradient(135.88deg, #EE3535 0%, #F3060D 100%);',
					color: '#FFF',
					width: '130rpx',
					height: '67rpx'
				},
			};
		}
	}
</script>

<style lang="scss" scoped>
	.send {
		height: 128rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
		.input {
			width: 530rpx;
			height: 68rpx;
			background-color: #F5F6F8;
			border-radius: 34rpx;
			padding: 0 20rpx;
			.ipt {
				width: 100%;
				height: 100%;
			}
		}
	}
	.scroll {
		height: calc(100vh - 128rpx);
		
	}
	.ritem {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 20rpx;
		.right {
			width: 80%;
			padding-right: 50rpx;
			display: flex;
			justify-content: flex-end;
			.msg {
				padding-top: 20rpx;
				margin-right: 20rpx;
				.msg-item {
					padding: 22rpx 46rpx 30rpx 34rpx;
					background-color: #F3060D;
					border-radius: 0px 100rpx 100rpx 40rpx;
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
			.avator {
				.img {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
				}
			}
		}
	}
	
.left {
	width: 80%;
	padding-left: 50rpx;
	display: flex;
	margin-bottom: 20rpx;
	.msg {
		padding-top: 20rpx;
		margin-left: 20rpx;
		.msg-item {
			padding: 22rpx 46rpx 30rpx 34rpx;
			background-color: #F3060D;
			border-radius: 0px 100rpx 100rpx 40rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: 500;
		}
	}
	.avator {
		.img {
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
		}
	}
}
.time {
	margin: 35rpx auto;
	font-size: 24rpx;
	color: #A6A6A6;
	font-weight: 400;
}
</style>

<style>
	page {
		background-color: #F5F6F8;
	}
</style>